 <template>
  <el-row type="flex">
    <div class="consultation-view-panel">
      <div class="consultation-question">
        <div class="time">
          <p class="main-color">提问于 {{consultation.created_at}}</p>
          <p>问题编号 {{consultation.id}}</p>
        </div>
        <div class="title">{{consultation.title}}</div>
        <div class="member-info margin-top-20 clearfix">
          <img
            class="float-left"
            :src="member.avatarImg ? member.avatarImg : 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3448484253,3685836170&fm=27&gp=0.jpg'"
            alt
          >
          <div class="float-left">
            <p class="name">
              <i>{{member.name}}</i>
              {{member.sex ? '巴巴' : '麻麻'}}
            </p>
            <p class="tag">
              <template v-for="(value, key, index) in consultation.consultationType">
                <el-tag :key="index" size="mini" class="margin-right-10">{{value}}</el-tag>
              </template>
            </p>
          </div>
        </div>
        <div class="desc margin-top-10">{{consultation.description}}</div>
        <template v-if="consultation.status > 2 ">
          <div class="consultation-answer">
            <div class="display-flex clearfix">
              <div class="answer-desc float-left">
                <ul class="chatroom">
                  <li class="message" v-for="m in messages">
                    <b>{{m.from}}</b>
                    : {{m.body}}
                    <br>
                    <span>{{m.time}}</span>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </template>
        <template v-if="consultation.status == 4">
          <div class="consultation-question margin-top-20">
            <div class="item-row">
              <p class="label">用户评价</p>
              <div class="margin-top-10">
                <el-rate
                  v-model="consultation.score"
                  disabled
                  show-score
                  text-color="#ff9900"
                  score-template="{value}"
                ></el-rate>
              </div>
            </div>
            <div class="desc margin-top-10">{{consultation.comment}}</div>
          </div>
        </template>
        <div class="item-row" v-if="consultation.diseaseFileList.length">
          <p class="label">相关图片</p>
          <div class="margin-top-10">
            <ul class="img-list clearfix">
              <li v-for="item in consultation.diseaseFileList" :key="item.id">
                <img :src="item.url" alt @click="picturePreview(item.url)">
              </li>
            </ul>
          </div>
        </div>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt>
        </el-dialog>
      </div>
      <el-row v-if="consultation.status == 1" class="text-center margin-top-30">
        <el-button type="primary" size="small" @click="acceptOrder()">我来回答</el-button>
      </el-row>
      <template v-if="isAccept">
        <div class="consultation-answer">
          <el-row>
            <el-input
              type="textarea"
              :rows="10"
              placeholder="请输入诊断结果"
              v-model="consultation.content"
            ></el-input>
          </el-row>
        </div>
        <div class="consultation-question">
          <div class="item-row">
            <p class="label">疾病类型</p>
            <div class="margin-top-10">
              <el-select v-model="consultation.diseaseType" multiple size="small" placeholder="请选择">
                <el-option
                  v-for="item in diseaseOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </div>
          </div>
          <el-row
            v-if="consultation.isCheck == 1"
            class="consultation-checkRemark margin-top-30"
          >驳回理由：{{consultation.checkRemark}}</el-row>
          <el-row class="text-center margin-top-30">
            <el-button type="warning" size="small" @click="cacheSubmit()">临时保存</el-button>
            <el-button type="primary" size="small" @click="postSubmit()">提交回复</el-button>
            <el-button size="small" @click="back()">返回</el-button>
            <el-button size="small" @click="searchInfo()">查阅资料</el-button>
          </el-row>
        </div>
      </template>
    </div>
    <PetInfo :petInfo="pet" :consultationInfo="consultation"/>
  </el-row>
</template>

<script>
import PetInfo from "@/components/pet/Info.vue";

export default {
  data() {
    return {
      consultation: {
        diseaseFileList: [],
        diseaseType: [],
        diseaseInfo: {},
        content: "",
        chat_content: []
      },
      member: {},
      pet: {},
      diseaseOptions: [],
      isAccept: 0,
      dialogImageUrl: "",
      dialogVisible: false,
      messages: []
    };
  },
  components: {
    PetInfo
  },
  mounted() {
    this.getDiseaseOptions();
    this.getConsultationInfoData();
  },
  methods: {
    getDiseaseOptions() {
      
      this.diseaseOptions = this.$store.state.config.options.disease;
    },
    getConsultationInfoData() {
      let consultationId = this.$route.params.consultationId;
      this.axios
        .get("/doctor/consultations/" + consultationId)
        .then(response => {
          if (response.data.code == 200) {
            this.consultation = response.data.data.consultation;
            this.member = response.data.data.member;
            this.pet = response.data.data.pet?response.data.data.pet:{};          
            if (this.consultation.status == 2) {
              this.isAccept = 1;
            }
            this.resetMessageFormatForShow(this.consultation.chat_content);
          } else {
            this.$message({
              message: response.data.msg,
              type: "error"
            });
          }
        });
    },
    picturePreview(url) {
      this.dialogImageUrl = url;
      this.dialogVisible = true;
    },
    acceptOrder() {
      let id = this.$route.params.consultationId;
      let doctorId = this.$store.state.doctorInfo.id;
      this.axios
        .patch("/doctor/consultations/" + id + "/receive", {
          doctorId: doctorId
        })
        .then(response => {
          if (response.data.code == 200) {
            this.$message({
              message: response.data.msg,
              type: "success"
            });
            this.isAccept = 1;
            return;
          } else {
            this.$message({
              message: response.data.msg,
              type: "error"
            });
            return;
          }
        });
    },
    cacheSubmit() {
      let id = this.$route.params.consultationId;
      this.axios
        .patch("/doctor/consultations/" + id + "/cache", {
          diseaseType: this.consultation.diseaseType,
          content: this.consultation.content
        })
        .then(response => {
          if (response.data.code == 200) {
            this.$message({
              message: response.data.msg,
              type: "success"
            });
            return;
          } else {
            this.$message({
              message: response.data.msg,
              type: "error"
            });
            return;
          }
        });
    },

    resetMessageFormatForPost(newChatContent) {
      var originChatMessage = [];
      var localDate = new Date();
      var postTime = localDate.toLocaleString();
      var tempNewChatContent = { doctor: newChatContent, time: postTime };
      originChatMessage.push(tempNewChatContent);
      var postMessage = originChatMessage;
      return postMessage;
    },

    postSubmit() {
      let consultationId = this.$route.params.consultationId;
      var postMessage = this.resetMessageFormatForPost(
        this.consultation.content
      );
      this.axios
        .patch("/doctor/consultations/" + consultationId + "/reply", {
          diseaseType: this.consultation.diseaseType,
          chatContent: JSON.stringify(postMessage)
        })
        .then(response => {
          if (response.data.code == 200) {
            this.$message({
              message: response.data.msg,
              type: "success"
            });
            this.$router.replace({ name: "MyAnswerList" });
            return;
          } else {
            this.$message({
              message: response.data.msg,
              type: "error"
            });
            return;
          }
        });
    },
    filterChatContent(chat_content) {
      var tempChatContent = this.consultation.chatContent;
    },

    resetMessageFormatForShow(messages) {
      if (messages) {
        var messagesArray = JSON.parse(messages);
        var newMessage = [];
        var tempKeyObject = {};
        var tempValueObject = {};
        for (var i = 0; i < messagesArray.length; i++) {
          var shopKey = Object.keys(messagesArray[i]).indexOf("shop");
          if (shopKey >= 0) {
            tempKeyObject = {
              from: "商店",
              body: messagesArray[i].shop,
              time: messagesArray[i].time
            };
          } else {
            tempKeyObject = {
              from: "医生",
              body: messagesArray[i].doctor,
              time: messagesArray[i].time
            };
          }
          newMessage.push(tempKeyObject);
        }
        this.messages = newMessage.reverse();
      } else {
        return this.messages;
      }
    },

    searchInfo() {
      window.open("http://info.bestwepet.com/", "_blank");
    },
    back() {
      this.$router.go(-1);
    }
  }
};
</script>
